<template>
	<view>
		<showNewData ref='chrild3' ></showNewData>
		<view class="top_bar" :animation='animationData' >
			<view @click="backLogin" class="top_bar_left">
				<image src="../../static/fh.png" mode=""></image>
			</view>
			<view class="top_bar_center">
				<!-- <text>详情</text> -->
			</view>
			<view class="top_bar_right">
				<image src="../../static/three.png" mode=""></image>
			</view>
		</view>
		<view class="bg">
			<image :src="cropFilePath" mode=""></image>
		</view>
		<view class="main">
			<view class="inner">
				<view class="group">
					<view class="name">{{ groupdata.groupname }}</view>
					<view class="time">{{ groupdata.groupdate }}</view>
					<view class="notice">
						{{ groupdata.notice }}
					</view>
				</view>
				<view class="render">
					<view class="top">
						<view class="title">群成员</view>
						<view v-if="usergroup.ismaster" @click="changoadmin" class="mone">管理成员</view>
					</view>
					<view class="render-ls">
						<view class="render-item" v-for='item,index in users' :key='index'>
							<view class="image">
								<image v-if='adminuser' @click="cloreUser(item)" id='closer' src="../../static/red_cha.png" mode=""></image>
								<image :src="item.userImg" mode=""></image>
								<view class="name">{{ item.name }}</view>
							</view>
						</view>
						<view v-show="usergroup" class="render-item" @click="addUsers" >
							<view class="image">
								<image id='add-friend' src="../../static/adds.png" mode=""></image>
								<view class="name">添加成员</view>
							</view>
						</view>
					</view>
					<view class="top">
						<view class="title">群设置</view>
						<!-- <view class="mone">更多成员</view> -->
					</view>
					<view class="options">
						<view class="low_head">
							<view class="title">群头像</view>
							<view class="cont">
								<image-cropper :src="tempFilePath" @confirm="confirm"  @cancel="cancel"></image-cropper>
								<image mode="heightFix" :src="cropFilePath" @tap="upload"></image>
								</view>
							<view v-if="usergroup.ismaster" class="more"><image src="../../static/goright.png" mode="heightFix"></image></view>
						</view>
						<view class="low_main" @click="addfriendAnimat('群名称',groupdata.groupname)" >
							<view class="title">群名称</view>
							<view class="cont"><text>{{ groupdata.groupname }}</text></view>
							<view v-if="usergroup.ismaster" class="more"><image src="../../static/goright.png" mode="heightFix"></image></view>
						</view>
						<view class="low_main" @click="addfriendAnimat('群公告',groupdata.notice)" >
							<view class="title">群公告</view>
							<view class="cont"><text>{{ groupdata.notice }}</text></view>
							<view v-if="usergroup.ismaster" class="more"><image src="../../static/goright.png" mode="heightFix"></image></view>
						</view>
						<view class="low_main" v-show="usergroup" @click="addfriendAnimat('群内名',usergroup.inner_name)" >
							<view class="title">群内名</view>
							<view class="cont"><text>{{ usergroup.inner_name }}</text></view>
							<view class="more"><image src="../../static/goright.png" mode="heightFix"></image></view>
						</view>
						<view v-show="usergroup" class="low_main">
							<view class="title title-o">消息免打扰</view>
							<view class="cont conts"><text></text></view>
							<view class="more change"> <switch checked @change="switchCange" color='#f4ea2a' /></image></view>
						</view>
						<view v-show="usergroup" class="logout" @click="cloreUser(userinfo)">
							<text>退出群聊</text>
						</view>
						<view v-show="!usergroup" class="add" @click="asaddGroupUser()">
							<text>加入群聊</text>
						</view>
						<view class="nodify" :animation='animationData2' >
							<view class="head">
								<view class="close"@click="addfriendAnimat" >取消</view>
								<view class="title">{{ nodifyTitel }}</view>
								<view class="defime"@click="handleDefime(nodifyTitel,showData)" >确定</view>
							</view>
							<view class="main">
								<input type="text" v-model="showData" placeholder="" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import showNewData from '../../components/showNewData.vue'
	import request from '../../utails/request.js'
	import ImageCropper from "../../components/ling-imgcropper/ling-imgcropper.vue";
	import datas from '../../commons/js/data.js'
	import dateformat from '../../commons/js/dateformat.js'
	
	export default {
		data() {
			return {
				userinfo:{},
				bgImg:'http://134.175.230.195:5555/s/static/s/image_files/2021for2021in2024-06-06-19-53-51.jpg',
				groupImg:'http://134.175.230.195:5555/s/static/s/image_files/2021for2021in2024-06-06-19-53-51.jpg',
				barTop:0, // 主页面到tab的高度
				users:[],
				groupname:'',// 群名
				groupdata:{}, // 群聊信息
				usergroup:{}, // 用户群内信息
			
				
				adminuser:false,// 管理成员
				tempFilePath:'',
				cropFilePath:'', // 图片本地文件
				animationData:{} ,// 动画
				animationDataTime:'', // 动画定时器
				animationData2:{} , // 修改数据动画
				changeData:'' ,//  修改的标签
				nodifyTitel:'',
				showData:'', // 修改前的内容
				isNodify:false ,// 点击修改
			}
		},
		onLoad(e) {
			this.groupname = e.groupname
		},
		onShow() {
			this.getGroupData()
			this.getSocketData()
		},
		onReady() {
			this.getElementStyle()
		},
		
		
		// 引入裁剪工具
		components: {
		    ImageCropper,
			showNewData
		  },
		
		// 页面滚动
		onPageScroll(){
			this.getElementStyle()
			this.scroolBar()
		},
		  
		methods: {
			// 接socket提醒
			getSocketData(){
				this.socket.emit('login',this.userinfo.id)
				this.socket.on('shows',(data)=>{
					let datas = {
						userimg:data.userimg,
						username:data.username,
						message:data.message
					}
					
					let ch = this.$refs.chrild3
					setTimeout(()=>{
						ch.handleShow(datas)
					},300)
				})
			},
			
			// 获取数据
			async getGroupData(){
				// 获取本地数据
				this.userinfo = uni.getStorageSync('userinfo')
				let data = {
					userid:this.userinfo.id,
					groupname:this.groupname
				}
				let res = await request.request2({url:'/group_detail/',data})
				this.users = res.users
				this.groupdata = res.group
				this.usergroup = res.user_gruop
				
				// 信息处理
				this.cropFilePath = this.groupdata.group_img
				this.groupdata.groupdate = dateformat.format2(this.groupdata.groupdate)
				this.usergroup.inner_name?'':this.usergroup.inner_name=this.userinfo.username
				
				
			},
			
			
			// 管理成员切换
			changoadmin(){
				this.adminuser = !this.adminuser
			},
			// 移除成员
			async cloreUser(user){
				let title = ''
				if(user.id==this.userinfo.id){
					title='确定要退出群聊吗'
				}else{
					title=`确定移除"${user.name}"吗`
				}
				uni.showModal({
					title:title,
					content:'移除后无法恢复',
					success: async (resp)=>{
						if(resp.confirm){
							let data = {
								userid:this.userinfo.id,
								groupname:this.groupdata.groupname,
								del_user:user.id
							}
							let resp = await request.request2({url:'/group_detail/',data,method:'DELETE'})
							if(resp.code=='200'){
								uni.showToast({
									title:'操作成功'
								})
								this.getGroupData()
								if(user.id==this.userinfo.id){
									// 返回首页
									setTimeout(()=>{
										uni.redirectTo({
											url:'../index/index'
										})
									},1500)
								}
							}else{
								uni.showToast({
									title:'操作失败',
									icon:'none'
								})
							}
							
						}
					}
				})
			},
			
			// 加入群聊
			async asaddGroupUser(){
				let data = {
					userid:this.userinfo.id,
					groupname:this.groupname,
					add_users:[this.userinfo.id]
				}
				
				let res = await request.request2({url:'/group_detail/',data, method:'PUT' })
				if(res.code=='200'){
					uni.showToast({
						title:'操作成功'
					})
					this.getGroupData()
					
				}else{
					uni.showToast({
						title:'操作失败',
						icon:'none'
					})
				}
			},
			// 消息免打扰
			switchCange(){
				
			},
			// 邀人进群
			addUsers(){
				uni.navigateTo({
					// <- 刷新
					url:`../shareusers/shareusers?userid=${this.userinfo.id}&groupname=${this.groupname}`
				})
			},
			
			// 修改数据时的动画
			addfriendAnimat(type,data){
				// 群名称 群公告权限判断
				if((type=='群名称'|| type=='群公告')&&(this.usergroup.ismaster==0||!this.usergroup)){
					return
				}
				
				this.nodifyTitel = type
				this.showData = data
				console.log('ok')
				this.isNodify = !this.isNodify
				// 实现拉长和回收有不同的速度
				var animation = uni.createAnimation({
				      duration: 500,
				        timingFunction: 'ease',
				    })
			
				if(this.isNodify){
					animation.top(0).step()
					
				}else{
					animation.top(1006).step()
				
				}
				this.animationData2 = animation.export()
			},
			//  点击确定 (修改群信息)
			async handleDefime(types,datas){
				// 处理
				if(types=='群名称'){
					this.groupname = datas
				}
				
				// 向后端发送数据
				let data = {
					userid:this.userinfo.id,
					groupname:this.groupdata.groupname,
					types:types,
					datas:datas
				}
				const res = await request.request({url:'/group_detail/',data,method:'POST'})
				if(res.code==200){
					this.addfriendAnimat(types, data)
					uni.showToast({
						title:'上传成功'
					})
					this.getGroupData()
				}else{
					uni.showToast({
						title:'上传失败',
						icon:'none'
					})
					this.addfriendAnimat(types, data)
				}
			},
			
			
			// 获取主体与头部是距离
			getElementStyle(){
				const query = uni.createSelectorQuery().in(this);
				query.select('.inner').boundingClientRect(data => {
				  this.barTop = data.top
				  // console.log(this.barTop)
				}).exec();
			},
			// 动画
			scroolBar(){
				var animation = uni.createAnimation({
					duration: 500,
				    timingFunction: 'ease',
				})
				clearTimeout(this.animationDataTime)
				this.animationDataTime = setTimeout(()=>{
				  if(this.barTop < 80){
					  animation.opacity(1).step()
				  }else{
					  animation.opacity(0).step()
				  }
				  this.animationData = animation.export()
				}, 200)
				
			},
			
			// 返回上一页
			backLogin(){
				uni.navigateBack({
					delta:1
				})
			},
			
			// 上传群头像
			  upload() {
				  if(this.usergroup.ismaster==0||!this.usergroup){
					  return
				  }
				  uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ["album"], //从相册选择
					success: (res) => {
					  this.tempFilePath = res.tempFilePaths.shift();
					},
				  });
				},
				confirm(e) {
				  this.tempFilePath = "";
				  this.cropFilePath = e.detail.tempFilePath;
			
				  uni.uploadFile({
					url: "http://127.0.0.1:8000/groupimg/",
					filePath: this.cropFilePath,
					name: "file",
					fileType: "image",
					formData:{
						userid:this.userinfo.id,
						groupname:this.groupdata.groupname
					},
					success: (uploadFileRes) => {
					  var backstr = uploadFileRes.data
					  console.log(backstr)
					  if(backstr.length>22){
						  uni.showToast({
						  	title:'创建成功'
						  })
					  }else{
						  uni.showToast({
						  	title:'由于网络问题 头像上传失败 请后续上传头像',
							icon:'none'
						  })
					  }
					},
			
					fail(e) {
					  console.log("this is errormes " + e.message);
					},
				  });
			
				
				},
				cancel() {
				  console.log("canceled");
				  this.tempFilePath = "";
				}
		}
	}
</script>

<style>
	@import '../../commons/css/myss.scss';
	.top_bar{
		background: rgba(255,255,255,0.96);
		border-bottom:1rpx solid #b5b5b5;
	}
	
	.bg{
		width: 100%;
		height: 100%;
		background: rgba(244,244,244,0.96); 
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.bg image{
		width: 100%;
		height: 750rpx;
	}
	
	.main{
		margin-top: 400rpx;
	}
	.main .inner{
		width: 100%;
		min-height: 800rpx;
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
	}
	.main .inner .group{
		padding: 20rpx 20rpx 40rpx;
		box-sizing: border-box;
		border-bottom: 1rpx #ADADAD solid;
	}
	.main .inner .group .name{
		float: left;
		font-weight: 600;
		font-size: 40rpx;
		line-height: 66rpx;
	}
	.main .inner .group .time{
		float: right;
		font-size: 28rpx;
		line-height: 66rpx;
	}
	.main .inner .group .notice{
		padding-top: 20rpx;
		font-size: 28rpx;
		line-height:40rpx;
		clear: both;
		display: -webkit-box;
		overflow: hidden; 
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.main .inner .render{
		border-bottom:grooverpx solid #808080;
	}
	.main .inner .render .top{
		padding: 20rpx 20rpx 0rpx 20rpx ;
		width: calc(100% - 40rpx);
		height: 100rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.main .inner .render .top .title{
		flex: 3;
		font-size: 36rpx;
		font-weight: 600;
		color: #737373;
	}
	.main .inner .render .top .mone{
		flex: 1;
		margin-right: 30rpx;
		/* float: right; */
	}
	
	.render-ls{
		width: 100%;
		padding: 20rpx 16rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		border-bottom: #b5b5b5 1rpx solid;
	}
	.render-item{
		width: 14%;
		height: 180rpx;
		padding: 10rpx 20rpx;
	}
	.render-item .image{
		position: relative;
		text-align: center;
	}
	.render-item .image image{
		width: 105rpx;
		height: 105rpx;
	}
	.render-item .name{
		height: 50rpx;
		width: 120rpx;
		/* padding: 0 10rpx; */
		font-size: 28rpx;
		color: #616161;
		text-align: center;
		line-height: 50rpx;
		display: -webkit-box;
		overflow: hidden; 
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		
	}
	#closer{
		position: absolute;
		top: -10rpx;
		right: -20rpx;
		width: 40rpx;
		height: 40rpx;
		z-index: 10;
	}
	
	#add-friend{
		background-color: #f4ea2a;
		width: 65rpx;
		height: 65rpx;
		padding: 20rpx;
	}
	
	.options{
		width: 94%;
		padding-left: 3%;
		display: flex;
		flex-direction: column;
		position: relative;
	}
	
	.options .low_head{
		flex: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.options .low_head .title{
		width: 112rpx;
		height: 112rpx;
		line-height: 112rpx;
		font-size: 36rpx;
		text-align: center;
		padding-left: 15rpx;
	}
	.options .low_head .cont{
		height: 112rpx;
		width: calc( 100% - 224rpx );
		padding: 6rpx 0;
	}
	.options .low_head .cont image{
		margin-left: 30rpx;
		height: 100rpx;
	}
	.options .low_head .more{
		height: 52rpx;
		width: 52rpx;
		padding: 30rpx;
	}
	.options .low_head .more image{
		height: 52rpx;
	}
	
	
	.options .low_main{
		flex: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.options .low_main .title{
		width: 132rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 36rpx;
		text-align: center;
		padding:0 15rpx;
		font-weight: 500;
	}
	.options .low_main .title-o{
		width: 220rpx;
	}
	.options .low_main .conts{
		width: calc( 100% - 352rpx );
	}
	/* cont */
	.options .low_main .cont{
		height: 90rpx;
		width: calc( 100% - 244rpx );
		padding: 6rpx 0;
		display: -webkit-box;
		overflow: hidden; 
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}
	
	.options .low_main .cont text{
		width: 100%;
		height: 100%;
		/* margin-left: 30rpx; */
		line-height: 90rpx;
	}
	
	.options .low_main .more{
		height: 44rpx;
		width: 44rpx;
		padding: 23rpx 34rpx;
	}
	.options .low_main .change{
		height: 64rpx;
		width: 114rpx;
		padding: 13rpx 4rpx;
	}
	.options .low_main .more image{
		height: 44rpx;
	}
	
	.options .logout{
		position: absolute;
		bottom: -100rpx;
		height: 90rpx;
		width: 100%;
		text-align: center;
		background-color: white;
	}
	.options .logout text{
		width: 100%;
		height: 100%;
		color:#dd524d;
		font-size: 40rpx;
		line-height: 90rpx;
	}
	.options .add{
		position: absolute;
		bottom: -140rpx;
		height: 90rpx;
		margin-bottom: 15rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		background-color: white;
		background-color:  #f4ea2a;
		color:#fff;
		font-size: 40rpx;
	}
	
	/* changeData */
	.nodify{
		position: fixed;
		top: 1006px;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #fff;
		z-index: 1000;
	}
	
	.nodify .head{
		height: 88rpx;
		width: 100%;
	}
	.nodify .head .close{
		float: left;
		height: 88rpx;
		width: 120rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
	}
	.nodify .head .title{
		float: left;
		height: 100%;
		width: calc(100% - 240rpx);
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: #555555;
	}
	
	.nodify .head .defime{
		float: right;
		height: 88rpx;
		width: 120rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: #007AFF;
	}
	
	.nodify .main{
		width:460rpx;
		background-color: #f1f1f0;
		margin: 40rpx auto;
		padding: 0 50rpx;
		height: 400rpx;
		font-size: 32rpx;
		line-height: 64rpx;
		border-radius: 36rpx;
		text-align: center;
	}
	.nodify .main input{
		width: 460rpx;
		height: 400rpx;
		background-color: #f1f1f0;
		font-size:36rpx;
	}
</style>
